import SPACEAVATAR from '@/assets/image/space-avatar.png';
import SPACETFAVORITE from '@/assets/image/space-favorite2.png';
import SPACETSENTENCES from '@/assets/image/space-sentences2.png';
import { cognitionTypes } from '@/services/ant-design-pro/brainSpace';
import { SpaceType } from '@/types/spaceType';
import { connect } from '@umijs/max';
import React, { useEffect, useState } from 'react';
import { history } from 'umi';
import '../index.less';
// import { cloneDeep } from 'lodash';
const imgs: any = {
  good_sentence: SPACETSENTENCES,
  good_article: SPACETFAVORITE,
};
const NewSpaceBottomLeft: React.FC = (props: any) => {
  const [navList, setNavList] = useState([]); //个人知识空间nav链接列表

  // const hitClick = (data: any) => {
  //   console.log('点击命中', data);
  // };
  //跳转
  const gotoNav = (item: any) => {
    history.push({
      pathname: `/spaceData?type=${item.type}&title=${item.title}`,
    });
  };
  //获取所有的nav
  const getSpaceMeta = async () => {
    const res = await cognitionTypes({});
    if (res.code === 0) {
      const { cognition_types } = res.data;
      props.dispatch({
        type: 'spaceModel/updateCognitionType',
        payload: cognition_types,
      });

      const spaceTypes = cognition_types.map((type: any) => {
        return {
          img: imgs[type.name],
          title: type.frontend_mete_data.title,
          describe: type.frontend_mete_data.describe,
          type: type.name as SpaceType,
          count: type.count,
        };
      });

      setNavList(spaceTypes);
    }
  };

  useEffect(() => {
    getSpaceMeta();
  }, []);

  return (
    <div className="newSpaceBottomLeft">
      <div className="newSpaceBottomLeftTitle">
        <span className="spaceAvatar">
          <img className="" src={SPACEAVATAR} alt="" height={27} width={27} />
        </span>
        <span className="spaceTit">个人知识空间</span>
        <span className="spaceTitInfo">信息的快速储存与提取</span>
      </div>
      <div className="spaceLinkBox">
        {navList.map((item: any, index: number) => {
          return (
            <div key={index} className="spaceLinkList" onClick={() => gotoNav(item)}>
              <span className="spaceLinkAvatar">
                <img className="" src={item.img} alt="" height={58} width={58} />
              </span>
              <span className="spaceLinkTitle">{item.title}</span>
              <span className="spaceLinkTip">{item.describe}</span>
              <span className="spaceLinkTotal">{item.count}条数据</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};
// export default NewSpaceBottomLeft;
export default connect(({ spaceModel }) => ({ spaceModel }))(NewSpaceBottomLeft);
